<template>
  <a-layout-sider :collapsible="collapsed" :theme="theme" :width="siderWidth">
    <a-menu
      mode="inline"
      :theme="theme"
      :collapsed="collapsed"
      @select="handleMenuChanged"
      :selected-keys="selectedKeys"
      v-model:open-keys="menuExpandKeys"
    >
      <aside-sub-menu
        v-for="item in menuInfo"
        :key="item?.name"
        :menu="item"
        :menuLevel="0"
        :openKeys="menuExpandKeys"
        :selectedKeys="selectedKeys"
      />
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
  import useAlLayoutMenu from '@/layouts/hooks/alLayoutMenu'
  import { useRouter } from 'vue-router'
  import { computed, ref } from 'vue'
  import AsideSubMenu from './AsideSubMenu.vue'
  import LayoutConfig from '@/layouts/layoutConfig.json'
  const collapsed = ref<boolean>(true)

  const router = useRouter()

  const siderWidth = computed(() => {
    if (LayoutConfig.sizeSettings && LayoutConfig.sizeSettings.leftWidth) {
      return LayoutConfig.sizeSettings.leftWidth
    } else {
      return 200
    }
  })
  const theme = computed(() => {
    if (LayoutConfig.themeSettings === 'DARK_COLOR') {
      return 'dark'
    } else {
      return 'light'
    }
  })

  const { selectedKeys, menuInfo, menuExpandKeys, codePathMap } = useAlLayoutMenu()

  const handleMenuChanged = ({ key }: { key: string }) => {
    if (codePathMap && codePathMap.get(key)) {
      const current = codePathMap.get(key)
      router.push(current.path)
    } else {
      router.push({
        name: key
      })
    }
  }
</script>

<style lang="less" scoped>
  :deep(.@{ant-prefix}-layout-sider-children) {
    overflow: auto;
  }
</style>
